<template>
	<view class="publish-container">
		<view class="publish-content-item">
			<view class="publish-item-view cu-form-group">
				<view class="publish-item-title">* 岗位名称</view>
				<view class="publish-item-con input-item">
					<input class="text-r" placeholder="请输入岗位名称" name="input" v-model="postName" />
				</view>
			</view>
			<view class="publish-item-view cu-form-group">
				<view class="publish-item-title">* 岗位类型</view>
				<picker class="publish-item-con picker-item" @change="_onPostTypeChange" :value="index_post" :range="postType"
				 range-key="name">
					<view class="picker-item-value picker">
						{{postTypeComputed}}
					</view>
				</picker>
			</view>
			<view class="publish-item-view cu-form-group">
				<view class="publish-item-title">* 所属企业</view>
				<picker class="publish-item-con picker-item" @change="_onComponyChange" :value="index_company" :range="company"
				 range-key="name">
					<view class="picker-item-value picker">
						{{companyComputed}}
					</view>
				</picker>
			</view>
			<view class="publish-item-view cu-form-group">
				<view class="publish-item-title">招聘小组</view>
				<picker class="publish-item-con picker-item" @change="_onGroupChange" :value="index_group" :range="group" range-key="name">
					<view class="picker-item-value picker">
						{{groupComputed}}
					</view>
				</picker>
			</view>
		</view>
		<view class="publish-content-item">
			<view class="publish-item-view cu-form-group">
				<view class="publish-item-title">* 招聘总人数</view>
				<view class="publish-item-con input-item">
					<input class="text-r" placeholder="请输入招聘总人数" name="input" v-model="headcount" type="number" />
				</view>
			</view>
			<view class="publish-item-view cu-form-group">
				<view class="publish-item-title">* 年龄</view>
				<picker class="publish-item-con picker-item" @change="_onAgeChange" :value="index_age" :range="ageArray" mode="multiSelector">
					<view class="picker-item-value picker flex rce age-item" v-if="((age_lower == '不限') && (age_upper == '不限'))">不限</view>
					<view class="picker flex rce" v-else>
						<view class="age-item">{{age_lower || '请选择'}}</view>
						<view class="line-style horizontal-line time-during-line"></view>
						<view class="age-item">{{age_upper || '请选择'}}</view>
					</view>
				</picker>
			</view>
			<view class="publish-item-view cu-form-group">
				<view class="publish-item-title">性别要求</view>
				<!-- <picker class="publish-item-con picker-item" @change="_onSexChange" :value="index_sex" :range="sex" range-key="name">
					<view class="picker-item-value picker">
						{{sexComputed}}
					</view>
				</picker> -->
				<checkbox-group @change="_onSexChange" class="publish-item-con flex-1 rce">
					<block v-for="(item,index) in sex" :key="index">
						<view class="checkbox-item sex-check-item flex rce ml-10">
							<checkbox :value="item.id" :checked="item.checked" />
							<view class="check-title">{{item.name}}</view>
						</view>
					</block>
				</checkbox-group>
			</view>
			<view class="publish-item-view cu-form-group">
				<view class="publish-item-title">男性人数</view>
				<view class="publish-item-con input-item">
					<input class="text-r" placeholder="请输入招聘人数" name="input" v-model="man_num" type="number" />
				</view>
			</view>
			<view class="publish-item-view cu-form-group">
				<view class="publish-item-title">女性人数</view>
				<view class="publish-item-con input-item">
					<input class="text-r" placeholder="请输入招聘人数" name="input" v-model="woman_num" type="number" />
				</view>
			</view>
			<view class="publish-item-view cu-form-group">
				<view class="publish-item-title">学历/学位</view>
				<picker class="publish-item-con picker-item" @change="_onDegreeChange" :value="index_degree" :range="degree"
				 range-key="name">
					<view class="picker-item-value picker">
						{{degreeComputed}}
					</view>
				</picker>
			</view>
			<view class="publish-item-view cu-form-group">
				<view class="publish-item-title">任务类型</view>
				<picker class="publish-item-con picker-item" @change="_onTaskTypeChange" :value="index_task" :range="taskType"
				 range-key="name">
					<view class="picker-item-value picker">
						{{taskTypeComputed}}
					</view>
				</picker>
			</view>
			<view class="publish-item-view cu-form-group">
				<view class="publish-item-title">薪资类型</view>
				<picker class="publish-item-con picker-item" @change="_onSalaryChange" :value="index_salary" :range="payType"
				 range-key="name">
					<view class="picker-item-value picker">
						{{payTypeComputed}}
					</view>
				</picker>
			</view>
			<view class="publish-item-view cu-form-group">
				<view class="publish-item-title">薪资(元)</view>
				<view class="publish-item-con input-item">
					<input class="text-r" placeholder="请输入" name="input" v-model="money" type="number" />
				</view>
			</view>
			<view class="publish-item-view cu-form-group">
				<view class="publish-item-title">工作地点</view>
				<view class="publish-item-con picker-item">
					<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="defaultArea" @onCancel="_onCancel" @onConfirm="_onConfirm" />
					<view @tap="_onSelectArea" class="address-sty picker-detail">{{area || "请选择"}}</view>
				</view>
			</view>
			<view class="publish-item-view cu-form-group">
				<view class="publish-item-title">详细地址</view>
				<view class="publish-item-con input-item">
					<input class="text-r" placeholder="请输入" name="input" v-model="address" />
				</view>
			</view>
			<view class="publish-item-view cu-form-group">
				<view class="publish-item-title">截止时间</view>
				<picker class="publish-item-con picker-item" mode="date" :value="date || 0" start="2019-01-01" end="2050-01-01" @change="_onDateChange">
					<view class="picker-item-value picker">
						{{date || '请选择'}}
					</view>
				</picker>
			</view>
		</view>
		<view class="publish-content-item">
			<view class="content-item-title">岗位描述</view>
			<view class="content-item-con">
				<textarea class="text-area-item" v-model="remark" placeholder="请输入岗位描述"></textarea>
			</view>
		</view>
		<view class="publish-content-item">
			<view class="content-item-title">专业技能</view>
			<view class="content-item-con">
				<textarea class="text-area-item" v-model="skill" placeholder="请输入岗位描述"></textarea>
			</view>
		</view>
		<view class="publish-content-item">
			<view class="content-item-title">额外补助</view>

			<checkbox-group @change="_onCheckboxChange" class="content-item-con grid col-3">
				<block v-for="(item,index) in subsidyList" :key="index">
					<view class="checkbox-item extra-item flex rcs">
						<checkbox :value="item.id" :checked="item.checked" />
						<view class="check-title">{{item.name}}</view>
					</view>
				</block>
			</checkbox-group>
		</view>
		<view class="publish-content-item">
			<view class="publish-item-view cu-form-group">
				<view class="publish-item-title">返费名称</view>
				<view class="publish-item-con input-item">
					<input class="text-r" placeholder="请输入" name="input" v-model="is_return_name" />
				</view>
			</view>
			<view class="publish-item-view cu-form-group">
				<view class="publish-item-title">返费金额</view>
				<view class="publish-item-con input-item">
					<input class="text-r" placeholder="请输入" name="input" v-model="is_return_money" type="number" />
				</view>
			</view>
			<view class="publish-item-view cu-form-group">
				<view class="publish-item-title">是否推荐</view>
				<picker class="publish-item-con picker-item" @change="_onRecommendChange" :value="index_recommend" :range="radioArray" range-key="name">
					<view class="picker-item-value picker">
						{{recommentComputed}}
					</view>
				</picker>
			</view>
			<view class="publish-item-view cu-form-group">
				<view class="publish-item-title">是否热门</view>
				<picker class="publish-item-con picker-item" @change="_onHotChange" :value="index_hot" :range="radioArray" range-key="name">
					<view class="picker-item-value picker">
						{{hotComputed}}
					</view>
				</picker>
			</view>
		</view>
		<view class="btn-wrap submit-btn-wrap">
			<view class="btn-item submit-btn-item" @tap="_onPressSubmit">确定</view>
		</view>
	</view>
</template>
<script>
	import mpvueCityPicker from '../../components/mpvue-citypicker/mpvueCityPicker.vue'
	export default {
		components: {
			mpvueCityPicker
		},
		data() {
			let ageArrayItem = [18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40,
				41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60
			];
			let age_lower_index = 0;
			let age_upper_index = 0;
			return {
				id: '',
				defaultArea: [0, 0, 0],
				themeColor: '#007AFF',

				sex: [],
				group: [],
				degree: [],
				company: [],
				payType: [],
				postType: [],
				taskType: [],
				ageArrayItem,
				subsidyList: [],
				radioArray: [
					{id: '', name: '请选择'},
					{id: 1, name: '是'},
					{id: 0, name: '否'},
				],
				ageArray: [ageArrayItem, ageArrayItem],

				area: '',
				date: '',
				skill: '',
				money: '',
				remark: '',
				address: '',
				sexName: '',
				postName: '',
				modalName: '',
				groupName: '',
				degreeName: '',
				companyName: '',
				payTypeName: '',
				postTypeName: '',
				taskTypeName: '',

				sex_id: [], // 性别要求id
				subsidy: [], // 额外补助
				man_num: '', // 男性人数
				group_id: '', // 招聘小组id
				woman_num: '', // 女性人数
				degree_id: '', // 学历/学位id
				headcount: '', // 招聘总人数
				age_lower: '', // 年龄下限
				age_upper: '', // 年龄上限
				company_id: '', // 所属企业id
				payType_id: '', // 薪资类型id
				taskType_id: '', // 任务类型id
				postType_id: '', // 岗位类型id
				is_recommend: '', // 是否推荐
				is_hot: '', // 是否热门
				is_return_name: '',
				is_return_money: '',
				

				index_sex: 0,
				index_hot: 0,
				index_post: 0,
				index_task: 0,
				index_group: 0,
				index_salary: 0,
				index_degree: 0,
				index_company: 0,
				age_lower_index,
				age_upper_index,
				index_recommend: 0,
				index_age: [age_lower_index, age_upper_index],

			}
		},
		computed: {
			// 客户状态
			groupComputed() {
				if (this.groupName) {
					return this.groupName
				} else {
					return this.index_group > 0 ? this.group[this.index_group].name : '请选择'
				}
			},
			// 所属企业
			companyComputed() {
				if (this.companyName) {
					return this.companyName
				} else {
					return this.index_company > 0 ? this.company[this.index_company].name : '请选择'
				}
			},
			// 岗位类型
			postTypeComputed() {
				if (this.postTypeName) {
					return this.postTypeName
				} else {
					return this.index_post > 0 ? this.postType[this.index_post].name : '请选择'
				}
			},
			// 学历/学位
			degreeComputed() {
				if (this.degreeName) {
					return this.degreeName
				} else {
					return this.index_degree > 0 ? this.degree[this.index_degree].name : '请选择'
				}
			},
			// 任务类型
			taskTypeComputed() {
				if (this.taskTypeName) {
					return this.taskTypeName
				} else {
					return this.index_task > 0 ? this.taskType[this.index_task].name : '请选择'
				}
			},
			// 薪资类型
			payTypeComputed() {
				if (this.payTypeName) {
					return this.payTypeName
				} else {
					return this.index_salary > 0 ? this.payType[this.index_salary].name : '请选择'
				}
			},
			// 性别要求
			sexComputed() {
				if (this.sexName) {
					return this.sexName
				} else {
					return this.index_sex > 0 ? this.sex[this.index_sex].name : '请选择'
				}
			},
			// 性别要求
			recommentComputed() {
				if (this.recommendName) {
					return this.recommendName
				} else {
					return this.index_recommend > 0 ? this.radioArray[this.index_recommend].name : '请选择'
				}
			},
			// 性别要求
			hotComputed() {
				if (this.hotName) {
					return this.hotName
				} else {
					return this.index_hot > 0 ? this.radioArray[this.index_hot].name : '请选择'
				}
			},

		},
		async onLoad(option) {
			console.log('this.date---->', this.date);
			await this.getPublishOptions();
			if (option.company_id) {
				this.company_id = option.company_id;
				this.index_company = this.company.findIndex(i => i.id == this.company_id) > -1 ? this.company.findIndex(i => i.id == this.company_id) : 0;
				console.log('this.index_company---->', this.index_company);
			}
			if(option.item) {
				let dataSource = JSON.parse(decodeURIComponent(option.item));
				this.initialDataSource(dataSource);
			}
		},
		methods: {
			initialDataSource(dataSource) {
				console.log('dataSource---->', dataSource);
				this.id = dataSource.id;
				this.postName = dataSource.name;
				this.postType_id = dataSource.position_type.id;
				this.companyName = dataSource.company_name;
				this.company_id = dataSource.company_id;
				this.group_id = dataSource.recruit_team_id;
				this.headcount = dataSource.person_num;
				this.age_lower = dataSource.age_lower;
				this.age_upper = dataSource.age_upper;
				this.sex_id = dataSource.sex;
				this.area = dataSource.area_str;
				this.address = dataSource.addr;
				this.man_num = '' + dataSource.man_num;
				this.woman_num = '' + dataSource.woman_num;
				this.edu_id = dataSource.edu_id;
				this.taskType_id = dataSource.recruit_type;
				this.payType_id = dataSource.money_type;
				this.money = dataSource.money;
				this.date = dataSource.end_date;
				this.remark = dataSource.remark;
				this.skill = dataSource.skill;
				this.subsidy = dataSource.subsidy_arr;
				this.is_return_name = dataSource.is_return_name;
				this.is_return_money = '' + dataSource.is_return_money;
				this.index_recommend = dataSource.is_recommend > 0 ? 1 : 2;
				this.index_hot = dataSource.is_popular > 0 ? 1 : 2;
				
				this.index_post = this.postType.findIndex(i => i.id == this.postType_id) > -1 ? this.postType.findIndex(i => i.id == this.postType_id) : 0;
				this.index_company = this.company.findIndex(i => i.id == this.company_id) > -1 ? this.company.findIndex(i => i.id == this.company_id) : 0;
				this.index_group = this.group.findIndex(i => i.id == this.group_id) > -1 ? this.group.findIndex(i => i.id == this.group_id) : 0;
				this.age_lower_index = this.ageArrayItem.findIndex(i => i == this.age_lower) > -1 ? this.ageArrayItem.findIndex(i => i == this.age_lower) : 0;
				this.age_upper_index = this.ageArrayItem.findIndex(i => i == this.age_upper) > -1 ? this.ageArrayItem.findIndex(i => i == this.age_upper) : 0;
				this.index_age = [this.age_lower_index, this.age_upper_index];
				this.index_degree = this.degree.findIndex(i => i.id == this.edu_id) > -1 ? this.degree.findIndex(i => i.id == this.edu_id) : 0;
				this.index_task = this.taskType.findIndex(i => i.id == this.taskType_id) > -1 ? this.taskType.findIndex(i => i.id == this.taskType_id) : 0;
				this.sex.forEach(i => {
					if (i.id == this.sex_id) {
						i.checked = true;
					} else if (this.sex_id == 3) {
						i.checked = true;
					}
					return i;
				})
				this.index_salary = this.payType.findIndex(i => i.id == this.payType_id) > -1 ?this.payType.findIndex(i => i.id == this.payType_id) : 0;
				
				this.subsidyList.forEach(i => {
					dataSource.subsidy_arr.forEach(j => {
						if (i.id == j) {
							i.checked = true;
							return i;
						}
					})
					return i;
				});
				
				console.log('this.subsidyList---->', this.subsidyList);
			},
			// 获取发布选择参数
			async getPublishOptions() {
				let url = this.ServicesApi.positionOption;
				let data = {};
				let result = await this.Services.post(url, data);
				if (result.code == this.StatusCode.SUCCESS_CODE) {
					this.group = result.data.recruit_team_List;
					this.company = result.data.company_list;
					this.postType = result.data.position_type_list;
					this.degree = result.data.education;
					this.taskType = result.data.recruit_type;
					this.payType = result.data.money_type;
					this.subsidyList = result.data.subsidy_list;
					this.sex = result.data.sex;
					if (this.id) {
						
					}
				}
			},
			// 地区选择
			_onSelectArea() {
				this.$refs.mpvueCityPicker.show()
			},
			// 确认
			_onConfirm(e) {
				this.pickerText = JSON.stringify(e)
				// console.log(this.pickerText)
				// console.log(e.label)
				this.area = e.label;
				// console.log(e.label.split('-'))
				this.region = e.label.split('-')
				// let regionNow = e.label.split('-')
				this.province = this.region[0] //省
				this.city = this.region[1] //市
				this.area = this.region[2] //区
				// console.log(this.region)
			},
			// 取消
			_onCancel() {

			},
			// 选择年龄
			_onAgeChange(e) {
				uni.hideKeyboard();
				let value = e.detail.value;
				this.index_age = value;
				let age_lower_index = value[0];
				let age_upper_index = value[1];
				if (age_lower_index > age_upper_index && (age_upper_index > 0)) {
					uni.showToast({
						icon: 'none',
						title: '最大年龄必须大于等于最小年龄',
					});
					return false;
				}
				this.age_lower = this.ageArray[0][age_lower_index];
				this.age_upper = this.ageArray[1][age_upper_index];
			},
			// 选择性别
			_onSexChange(e) {
				uni.hideKeyboard();
				let value = e.detail.value;
				this.sex_id = value;
				console.log('this.sex_id---->', this.sex_id);
				// this.index_sex = value;
				// this.sex_id = this.sex[value].id;
			},
			// 选择日期
			_onDateChange(e) {
				uni.hideKeyboard();
				let value = e.detail.value;
				this.date = value;
			},
			// 选择小组
			_onGroupChange(e) {
				uni.hideKeyboard();
				let value = e.detail.value;
				this.index_group = value;
				this.group_id = this.group[value].id;
			},
			// 选择学历
			_onDegreeChange(e) {
				uni.hideKeyboard();
				let value = e.detail.value;
				this.index_degree = value;
				this.degree_id = this.degree[value].id;
			},
			// 选择企业
			_onComponyChange(e) {
				uni.hideKeyboard();
				let value = e.detail.value;
				this.index_company = value;
				this.company_id = this.company[value].id;
			},
			// 选择薪资类型
			_onSalaryChange(e) {
				uni.hideKeyboard();
				let value = e.detail.value;
				this.index_salary = value;
				this.payType_id = this.payType[value].id;
			},
			// 选择岗位类型
			_onPostTypeChange(e) {
				uni.hideKeyboard();
				let value = e.detail.value;
				this.index_post = value;
				this.postType_id = this.postType[value].id;
			},
			// 选择任务类型
			_onTaskTypeChange(e) {
				uni.hideKeyboard();
				let value = e.detail.value;
				this.index_task = value;
				this.taskType_id = this.taskType[value].id;
			},
			// 选择额外补助
			_onCheckboxChange(e) {
				uni.hideKeyboard();
				let value = e.detail.value;
				this.subsidy = value;
			},
			// 选择推荐
			_onRecommendChange(e) {
				uni.hideKeyboard();
				let value = e.detail.value;
				this.index_recommend = value;
				this.is_recommend = this.radioArray[value].id;
			},
			// 选择热门
			_onHotChange(e) {
				uni.hideKeyboard();
				let value = e.detail.value;
				this.index_hot = value;
				this.is_hot = this.radioArray[value].id;
			},
			// 提交数据
			async _onPressSubmit() {
				var pages = getCurrentPages();
				var currPage = pages[pages.length - 1]; // 当前页面
				var prevPage = pages[pages.length - 2]; // 上一个页面
				// 直接调用上一个页面的setData()方法，把数据存到上一个页面中去
				prevPage && prevPage && prevPage.setData && prevPage.setData({
					isDoRefresh: true
				});
				let url = this.ServicesApi.positionCreateEdit;
				let data = {
					sex: this.sex_id, // 性别要求0无限制1男2女
					id: this.id || '', // 这个有值就是修改，没值就是新增
					exp: this.exp, // 相关经验
					money: this.money, // 薪资
					skill: this.skill, // 专业技能
					name: this.postName, // 招聘任务岗位名称
					remark: this.remark, // 岗位描述
					end_date: this.date, // 截止日期
					man_num: this.man_num, // 男性要求数量
					subsidy: this.subsidy, // 额外补助 这个最少一个值
					edu_id: this.degree_id, // 学历
					woman_num: this.woman_num, // 女性要求数量
					type_id: this.postType_id, // 岗位类型id
					age_lower: this.age_lower, // 年龄下限
					age_upper: this.age_upper, // 年龄上限
					person_num: this.headcount, // 招聘总人数
					company_id: this.company_id, // 企业id
					money_type: this.payType_id, // 薪资类型
					recruit_type: this.taskType_id, // 任务类型
					recruit_team_id: this.group_id, // 招聘小组id
					is_return_name: this.is_return_name, // 招聘小组id
					is_return_money: this.is_return_money, // 招聘小组id
					address: this.address, // 招聘小组id
					is_popular: this.is_hot,
					is_recommend: this.is_recommend,
					
				};
				console.log('data---->', data);
				if (!this.postName) {
					return uni.showToast({
						icon: 'none',
						title: '请输入岗位名称'
					});
				}
				if (!this.company_id) {
					return uni.showToast({
						icon: 'none',
						title: '请选择所属企业'
					});
				}
				if (!this.taskType_id) {
					return uni.showToast({
						icon: 'none',
						title: '请选择岗位类型'
					});
				}
				if (!this.headcount) {
					return uni.showToast({
						icon: 'none',
						title: '请输入招聘总人数'
					});
				}
				let result = await this.Services.post(url, data);
				if (result.code == this.StatusCode.SUCCESS_CODE) {
					uni.showToast({
						icon: 'none',
						title: result.msg,
					});
					setTimeout(() => {
						uni.navigateBack({
							delta: 1,
							animationType: 'pop-out',
							animationDuration: 200
						});
					}, 1500);
				} else {
					uni.showToast({
						icon: 'none',
						title: result.msg,
					});
				}
			}
		},
		mounted() {}
	}
</script>
<style scoped lang="stylus">
	.publish-container {
		.publish-content-item {
			margin-top: 20rpx;
			background: #fff;
			padding: 20rpx 30rpx;

			.publish-item-view {
				padding: 0;
				font-size: 28rpx;

				.publish-item-title {
					color: #666;
				}

				.publish-item-con {
					color: #333;
				}

				.input-item {}

				.picker-item {
					.picker-item-value {}
					.picker-detail {
						-webkit-box-flex: 1;
						-webkit-flex: 1;
						flex: 1;
						padding-right: 22px;
						position: relative;
					}
					.picker-detail::after {
						font-family: cuIcon;
						display: block;
						content: "\E6A3";
						position: absolute;
						font-size: 18px;
						color: #8799a3;
						width: 33px;
						text-align: center;
						top: 0;
						bottom: 0;
						right: -11px;
						margin: auto;
					}
				}
				.time-during-line {
					width: 30rpx;
					margin: 0 10rpx;
				}

				.time-input-item {
					width: 260rpx;
					flex: none;
				}
			}

			.publish-item-view:last-of-type {}

			.content-item-title {
				color: #666;
				font-size: 28rpx;
			}

			.content-item-con {
				padding: 20rpx;
				margin-top: 16rpx;
				min-height: 160rpx;
				background: #F9F9F9;
			}

			.content-item-con.grid {
				background: #fff;

				.checkbox-item.extra-item {
					margin: 6rpx 0;
				}
			}
			.sex-check-item.checkbox-item {
				margin-left: 20rpx;
			}
			.check-title {
				margin-left: 10rpx;
			}

			.text-area-item {
				width: auto;
				height: auto;
				padding: 0 10rpx;
				margin: 10rpx;
				min-height: 160rpx;
			}
		}

		.submit-btn-wrap {
			margin: 60rpx;

			.submit-btn-item {
				height: 90rpx;
				color: #fff;
				font-size: 30rpx;
				text-align: center;
				line-height: 90rpx;
				border-radius: 4rpx;
				background: linear-gradient(270deg, rgba(0, 106, 231, 1) 0%, rgba(66, 157, 255, 1) 100%);
			}
		}
	}
</style>
